{% extends "base.html" %}
{% load i18n %}
{% load webdesign %}
{% load humanize %}

{% block app_css %}
<link rel="stylesheet" type="text/css" href="/static/css/message.css" />
{% endblock %}

{% block app_js %}
<script type="text/javascript" src="/static/js/max_length.js"></script>
<script type="text/javascript" src="/static/js/post_message.js"></script>
<script type="text/javascript" src="/static/js/message.js"></script>
{% endblock %}

{% block container %}
<div id="show-place">
  <img src="{{user.avatar_link}}" height="96" width="96" border="0" />
  <div id="messages">
    <div id="search-bar">
      {% trans 'search messages' %}:
      <input id="search-words" />
      <input type="button" value="{%trans 'submit'%}" id="search" />
    </div>
    {% for i in message_list %}
    {% ifequal i.src.0 user.username%}
    <div class="message sent">
      <a href="{%url glowdrop.member.views.space i.dest.0 %}" id='counterpart-link'>
        <img src="{{i.dest.1}}" width="48" height='48' border="0"/></a>
      <div class="meta">
        <span>{% trans 'to' %}: 
          <a href="{%url glowdrop.member.views.space i.dest.0 %}">
            <em>{{i.dest.0}}</em>
          </a>
        </span>
        <span>{{i.pub_date|timesince}}</span>
      </div>
      <div class="content">{{i.content}}</div>
      <a href="#another_message">{% trans 'another message to ' %}<span id="username">{{i.dest.0}}</span></a>
    </div>
    {% else %}
    <div class="received message">
      <a href="{%url glowdrop.member.views.space i.src.0 %}" id='counterpart-link'><img src="{{i.src.1}}" width="48" height='48' border="0"/></a>
      <div class="meta">
          <span>{% trans 'from' %}: <a href="{%url glowdrop.member.views.space i.src.0 %}"><em>{{i.src.0}}</em></a></span>
        <span>{{i.pub_date|timesince}}</span>
      </div>
      <div class="content">{{i.content}}</div>
      <a href="#reply_message">{% trans 'reply to ' %}<span id="username">{{i.src.0}}</span></a>
    </div>
    {% endifequal %}
    {% endfor %}
    <div id="navigation-bar">
      <div id="places">
        <a href="{% url glowdrop.member.views.my_message %}?page_size={{page_size}}" {% ifequal page_no 0 %}class="hidden"{% endifequal %} >
          {% trans 'first' %}
        </a>
        <a href="{% url glowdrop.member.views.my_message %}?page_no={{page_no|add:-1}}&page_size={{page_size}}" {% ifequal page_no 0%}class="hidden"{% endifequal%}>
          {% trans 'prev' %}
        </a>
        <a href="{% url glowdrop.member.views.my_message %}?page_no={{page_no|add:1}}&page_size={{page_size}}" {% ifequal page_no total_page_no|add:-1 %}class="hidden"{% endifequal %}>
          {% trans 'next' %}
        </a>
        <a href="{% url glowdrop.member.views.my_message%}?page_no={{total_page_no|add:-1}}&page_size={{page_size}}" {% ifequal page_no total_page_no|add:-1 %}class="hidden"{% endifequal %}>
          {% trans 'last' %}
        </a>
      </div>
      {% blocktrans with page_no|add:1|ordinal as my_page_no%}{{my_page_no}} page, total {{total_page_no}} pages{% endblocktrans %}
    </div>
  </div>
</div>
<div id="side-bar">{% lorem 3 p%}</div>
<div class="message-prototype" style="display:none;">
</div>
{% include "misc/post_message.html" %}
{% endblock %}
